<template>
    <div class="home">
      <div class="logo-box"></div>
      <div class="search-box">
        <input type="text">
        <button @click="goSearch">搜索一下</button>
      </div>
      <div class="hot-link">
        热门搜索：

        <router-link to="/search/黑马程序员">黑马程序员</router-link>
        <router-link to="/search/前端培训">前端培训</router-link>
        <router-link to="/search/如何成为前端大牛">如何成为前端大牛</router-link>
      </div>
    </div>
  </template>
  
  <script>
//   ! this.router --->  指的是路由的实例对象，可以操作路由的所有内容 提供一些内置的方法 push等
//   ! this.route  --->  操作路由规则 操作当前组件的路由规则的
  export default {
    name: 'FindMusic',
    methods:{
        goSearch(){
        // ! 1.push路径跳转
            // ! 1.1 简单的写法
            // this.$router.push('/search')

        // # 2.查询参数传参
            // # 2.1 简单写法
            // this.$router.push('/search?key=你好')
            // # 2.2 完整写法
            // this.$router.push({
            //     path:'/search?key=黑马'
            // })
        

            // ! 1.2 完整的写法
            // this.$router.push({
            //     path:'/search'
            // })
           
        // todo 2.动态路由传参
            // todo 2.1 简单写法
            // this.$router.push('/search/你好')
            // todo 2.2 完整写法
            // this.$router.push({
            //     path:'/search/黑马'
            // })

       
            

        // ! 2.name路由命名跳转（适合在路径名称比较长的时候使用）
                // this.$router.push({
                //     name:'Search',
                // })
            // # 2.查询参数传参
             this.$router.push({
                    name:'Search',
                    query:{
                        key:'你好黑马'
                    }
            })

            // todo 动态路由传参
                this.$router.push({
                    name:'Search',
                    params:{
                        words:'你好，前端'
                    }
                })
        }
    }
  }
  </script>
  
  <style>
  .logo-box {
    height: 150px;
    background: url('@/assets/logo.jpeg') no-repeat center;
  }
  .search-box {
    display: flex;
    justify-content: center;
  }
  .search-box input {
    width: 400px;
    height: 30px;
    line-height: 30px;
    border: 2px solid #c4c7ce;
    border-radius: 4px 0 0 4px;
    outline: none;
  }
  .search-box input:focus {
    border: 2px solid #ad2a26;
  }
  .search-box button {
    width: 100px;
    height: 36px;
    border: none;
    background-color: #ad2a26;
    color: #fff;
    position: relative;
    left: -2px;
    border-radius: 0 4px 4px 0;
  }
  .hot-link {
    width: 508px;
    height: 60px;
    line-height: 60px;
    margin: 0 auto;
  }
  .hot-link a {
    margin: 0 5px;
  }
  </style>